<template>
  <el-dialog :close-on-click-modal="false" :title="$tt('label_quick_checkout')" :visible.sync="visible"
    custom-class="dialog_extra" destroy-on-close>
    <div v-loading="loading">

      <el-form :model="form" ref="form" label-position="top">
        <el-form-item prop="tableList" :label="$tt('label_sku_specification')">
          <ex_super_table ref="table" v-bind="tableBaseOption" :data="form.tableList" height="600">
          </ex_super_table>

        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog_footer">
        <el-button @click="visible = false">{{ $tt('label_cancel') }}</el-button>
        <el-button type="primary" @click="submit">{{ $tt('label_submit') }}</el-button>
      </span>
    </div>

  </el-dialog>
</template>

<script>
let defaultRow = {
  receivingId: "",
  checkoutTotalWeight: "",
  checkoutTotalVolume: "",

  trackingNumber: ""
}
import volume_input from '@/component/wms/volume_input.vue';

export default {
  data() {
    return {
      visible: false,
      loading: false,

      form: {
        tableList: [],
      },
      tableBaseOption: {
        attrs: {
          // 'cell-class-name': this.cellClassName, 
          'span-method': this.objectSpanMethod
        },
        model: [
          { key: 'receivingCode', label: 'label_inbound_code', 'width': 140, },
          { key: 'customerCode', label: 'label_customer_info', 'width': 120, 'show-overflow-tooltip': true, },

          { key: 'boxNo', label: 'label_box_code', 'width': 140, },

          {
            key: 'skuName', label: 'label_sku_name', 'width': 140,
            formatter: (r, c, v) => this.$formatNameCode(v, r.skuNameEn),
          },
          { key: "skuBarcode", label: "label_sku_code", 'width': 140, },
          { key: 'skuOnlyCode', label: 'label_sku_only_code', 'width': 140, },
          { key: 'receivingQty', label: 'label_receiving_number', 'width': 100, },
          {
            key: 'acceptanceQty', label: 'label_acceptance_number', 'width': 100,
            formatter: (r, c, v, i) => r.acceptanceStatus == 'NOT_ACCEPTANCE' ? this.$tt('data_temp_none') : v
          },
          { key: 'checkoutQty', label: 'label_checkout_sku_count', 'width': 100, },

          {
            key: 'checkoutTotalWeight', label: 'label_total_weight', 'width': 160,
            'label-class-name': 'label_require_before',
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}

                >
                  <ex_super_input
                    value={row[column.property]}
                    onInput={value => {
                      this.$set(row, column.property, value)
                    }}
                    placeholder={this.$tt('label_total_weight')}
                    append="kg" appendClass="input_slot_div_mini"
                  >
                  </ex_super_input>
                </el-form-item>
              );
            }
          },
          {
            key: 'checkoutTotalVolume', label: 'label_total_volume', 'min-width': 240,
            renderHeader: (h, { column, $index }) => (<div>
              <div class="table-require">{column.label}</div>
              <el-button-group>
                <el-button size="mini" onClick={e => this.$refs.table.$refs.volume_input.forEach(vi => vi.changeType('LWH'))}> {this.$tt('label_lwh')}</el-button>
                <el-button size="mini" onClick={e => this.$refs.table.$refs.volume_input.forEach(vi => vi.changeType('V'))}>{this.$tt('label_volume')}</el-button>
              </el-button-group>
            </div>),
            render: (h, { column, row, index }) => {
              return (
                <el-form-item
                  prop={`tableList.${index}.${column.property}`}
                  rules={this.formRules[column.property]}
                >
                  {
                    h(volume_input, {
                      ref: 'volume_input',
                      key: row.boxId,
                      refInFor: true,
                      props: {
                        value: row[column.property],
                        placeholderLWH: this.$tt('label_l_w_h'),
                        placeholderV: this.$tt('label_total_volume'),
                      },
                      on: {
                        input: (e) => this.$set(row, column.property, e)
                      }
                    })
                  }

                </el-form-item>
              );
            }
          },
        ],
      },
      formRules: {
        measureWeight: {
          required: true, trigger: 'change',
          validator: (r, v, cb) => {
            if (!this.$reg.DigitNumber(v, 3, 9)) {
              return cb(this.$tt("tip_only_digit_int_length", { digit: 3, int: 9 }))
            }
            cb()
          }
        },
        measureVolume: {
          required: true, trigger: 'change',
          validator: (r, v, cb) => {
            if (Number.isNaN(v)) {
              return cb(this.$tt("tip_lwh_use_split"))
            } else if (!this.$reg.DigitNumber(v, 6, 9)) {
              return cb(this.$tt("tip_only_digit_int_length", { digit: 6, int: 9 }))
            }
            cb()
          }
        },
      },
    }
  },
  props: {


  },

  computed: {

  },
  methods: {
    // cellClassName({ row, column, rowIndex, columnIndex }) {
    //   if (['orderInfo',].includes(column.property)) {
    //     return "revert_cell_border"
    //   }
    // },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (['receivingCode', 'customerCode', 'orderInfo', 'orderSku',].includes(column.property)) {
        return { rowspan: row.rowspanOrder, colspan: 1 }
      }
    },
    show({ tableList }) {
      this.loading = true
      this.$ajax({
        url: "/wms-api/inbound/WmsInboundTransitReceivingRpc/selectBatchDetail.json",
        method: 'post',
        data: { ids: tableList.map(it => it.id) },
        success: (res) => {
          this.form.tableList = _.flatMap(res.data.rows, it => {
            const groupUnion = _.unionBy(it.detailList.filter(sku =>
              sku.receivingStatus != 'NOT_RECEIVING' && sku.checkoutStatus != 'CHECKOUT_COMPLETED'), 'receivingCode')
            groupUnion.forEach((box, boxIndex) => {
              // box.expectBoxQty = it.expectBoxQty
              // box.expectSkuQty = it.expectSkuQty

              // box.receivingBoxQty = it.receivingBoxQty
              // box.receivingSkuQty = it.receivingSkuQty
              // box.measureWeight = box.boxMeasureOrderWeight
              // box.measureVolume = box.boxMeasureOrderVolume

              if (box.acceptanceStatus != 'NOT_ACCEPTANCE') {
                box.checkoutQty = box.acceptanceQty
              } else {
                box.checkoutQty = box.receivingQty
              }
              if (boxIndex == 0) {
                box.rowspanOrder = groupUnion.length
              } else {
                box.rowspanOrder = 0
              }
            })

            return groupUnion
          })
        },
        complete: () => {
          this.loading = false
        }
      })
      this.visible = true

    },
    // show(list) {
    //   this.visible = true
    //   this.form.tableList = _.cloneDeep(list)

    //   // list.map(it => {
    //   //   return Object.assign({}, it, defaultRow, { receivingId: it.id })
    //   // })
    // },
    hide() {
      this.visible = false
    },

    submit() {
      if (this.form.tableList.some(it => _.isEmpty(it.checkoutTotalWeight))) {
        this.$message.error(this.$tt("tip_Checkout_weight_no_empty"))
        return
      }
      if (this.form.tableList.some(it => _.isEmpty(it.checkoutTotalVolume))) {
        this.$message.error(this.$tt('tip_Checkout_volume_no_empty'))
        return
      }
      let keys = _.keys(defaultRow)
      let _out_list = this.form.tableList.map(item => {
        return _.pickBy(item, (v, k) => keys.some(it => it == k)
        )
      })
      this.$emit('submit', _out_list)
      this.visible = false
    },
  }
}
</script>
